<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/base.js"></script>
</head>
<body>
<h1>学生注册</h1>
用户名: <input type="text" id="username"/><span id="usernameAlert"></span><br>
密码: <input type="password" id="password"/><br>
密码重复: <input type="password" id="rePassword"/><span id="passwordAlert"></span><br>
性别: <input id="gender1" checked="checked" type="radio" name="gender" value="男"/>男<input id="gender2" type="radio" name="gender" value="女"/>女<br>
<button onclick="onSignUpClick()">注册</button>
<script>
    let password;
    let username;
    function onSignUpClick() {
        password = document.getElementById("password").value;
        let rePassword = document.getElementById("rePassword").value;
        //本地校验密码
        if (password != rePassword) {
            document.getElementById("passwordAlert").innerHTML = "两次密码输入不一致";
            document.getElementById("passwordAlert").style.color = "#ff0000";
            return;
        } else {
            document.getElementById("passwordAlert").innerHTML = "两次密码输入一致";
            document.getElementById("passwordAlert").style.color = "#00ff00";

            //远程校验用户名是否已经存在
            username = document.getElementById("username").value;
            //get请求的时候服务器要求的方式
            let url = "http://localhost:9001/Demo/user/username" + "?username=" + username;
            let method = "get";
            $.rest(method, url, null, function (r) {
                if (r.code == 500) {
                    document.getElementById("usernameAlert").innerHTML = "用户名已经存在";
                    document.getElementById("usernameAlert").style.color = "#ff0000";
                    return ;
                } else {
                    document.getElementById("usernameAlert").innerHTML = "用户名可以使用";
                    document.getElementById("usernameAlert").style.color = "#00ff00";
                    //提交用户名和密码
                    let requestJson = {};
                    requestJson.username = username;
                    requestJson.password = password;
                    if (document.getElementById("gender1").checked) {
                        requestJson.gender = "男";
                    } else {
                        requestJson.gender = "女";
                    }
                    $.rest("post", "http://localhost:9001/Demo/user/signUp", requestJson, function (r) {
                        alert("注册成功");
                    });
                }

            })
        }
    }

</script>
</body>
</html>